<template>
  <view>
    <view class="flex itesm-start " @click="state.show = true">
      <wd-img width="40rpx" height="40rpx" src="/static/images/bank.png"></wd-img>
      <view class="flex-1 text-sm ml-4">
        <view class="text-[#0D0D0D] mb-[20rpx]">储蓄卡卡号</view>
        <view class="text-[#646466]">6125 80** **** 2611</view>
      </view>
      <view class="self-center">
        <wd-icon name="arrow-right" size="24rpx" color="#646466"></wd-icon>
      </view>
    </view>

    <wd-popup v-model="state.show" :lock-scroll="true" :hide-when-close="false" position="bottom"
      custom-class="h-[600rpx] rounded-lg" :safe-area-inset-bottom="true">

      <selectBankList :modelValue="modelValue.id" @close="state.show = false" @update:model-value="handleUpdateBank">
      </selectBankList>
    </wd-popup>

  </view>
</template>

<script setup>
import selectBankList from "./select-bank-list.vue";
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
});
const state = ref({
  show: false
});
const emit = defineEmits(["update:modelValue"]);
function handleUpdateBank(value) {
  emit("update:modelValue", {
    ...props.modelValue,
    id: value
  })

}

</script>

<style lang="scss" scoped></style>
